---
title: अपने dApp को RainbowKit v2 के लिए अपग्रेड करना
description: RainbowKit और Wagmi को v2 में पदोन्नत कर दिया गया है
image: guide-rainbowkit-v2.png
---

# RainbowKit और Wagmi v2 के लिए माइग्रेट करना

[wagmi](https://wagmi.sh) और [viem](https://viem.sh) पीयर निर्भरताएँ `2.x.x` तक पहुँच चुकी हैं और इनमें ब्रेकिंग बदलाव हैं।

नीचे दिए गए चरणों का पालन करें।

**1. रेनबो किट, `wagmi`, और `viem` को उनके नवीनतम संस्करण तक अपग्रेड करें**

```bash
npm i @rainbow-me/rainbowkit wagmi viem@2.x
```

**2. `@tanstack/react-query` पियर निर्भरता इंस्टॉल करें**

Wagmi v2 के साथ, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) अब एक आवश्यक पीयर निर्भरता है।

इसे निम्नलिखित आदेश के साथ स्थापित करें:

```bash
npm i @tanstack/react-query
```

**3. अपनी रेनबो किट और वेगमी कंफिगरेशन अपग्रेड करें**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. `wagmi` और `viem` में ब्रेकिंग परिवर्तन की जांच करें**

यदि आप अपने dApp में `wagmi` होक्स और `viem` एक्शन का उपयोग करते हैं, तो आपको v2 के लिए माइग्रेशन गाइड का पालन करना पड़ेगा:

- [Wagmi v2 माइग्रेशन गाइड](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Viem v2 ब्रेकिंग परिवर्तन](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### RainbowKit बदलाव

**1. EIP-6963 वॉलेट्स के लिए व्यवहार में सुधार**

नए EIP-6963 कनेक्शन मानक का समर्थन करने वाले वॉलेट (जिसमें रेनबो, मेटामास्क और अन्य शामिल हैं) अब `Installed` सेक्शन में स्वतः दिखाई देंगे। इससे सुनिश्चित होता है कि उपयोगकर्ता हमेशा अपने पसंदीदा वॉलेट खोज सकें और dApps से बिना संघर्ष या फ़ॉलबैक बटन के जुड़ सकें।

डेवलपर्स को अंत उपयोगकर्ताओं के लिए पसंदीदा वॉलेट को प्राथमिकता देने के लिए कस्टम वॉलेट सूची पर पूरा नियंत्रण जारी रहता है। यह अनुशंसा की जाती है कि आप सभी प्लेटफार्मों का समर्थन करने के लिए अपनी सूची में `injectedWallet` और `walletConnectWallet` को शामिल करना जारी रखें।

**2. getDefaultConfig के साथ Wagmi कॉन्फ़िगरेशन**

यह नया API कंफिगरेशन अनुभव को सरल करता है और Wagmi की `createConfig` का प्रत्यक्ष उपयोग करने की आवश्यकता को बदलता है। चैन कंफिगरेशन को सरल किया गया है, जिसमें `transports` के लिए स्वचालित सार्वजनिक प्रदाता शामिल हैं।

डिफ़ॉल्ट वॉलेट सूची स्वचालित रूप से शामिल की जाएंगी, जिससे `getDefaultWallets` और `connectorsForWallets` के उपयोग की आवश्यकता समाप्त हो जाएगी।

आप `wallets` में आयातित या कस्टम वॉलेट कनेक्टर्स को पास कर के एक कस्टम वॉलेट सूची बना सकते हैं। वॉलेट कनेक्टर्स की इंस्टैंसिएशन और `projectId` और `chains` पास करने की अब आवश्यकता नहीं है।

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. रेनबो किट प्रोवाइडर**

आपको अब `<RainbowKitProvider>` में `chains` पास करने की आवश्यकता नहीं है।

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. कस्टम चेन**

`चेन` प्रकार Wagmi v2 के अनुसार बदला गया है, और RainbowKit के `iconUrl` और `iconBackground` मेटाडेटा का समर्थन जारी रखता है।

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

`getDefaultConfig` के साथ उदाहरण:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overrides */
+ ],
});
```

`createConfig` के साथ उदाहरण:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. कस्टम वॉलेट्स**

RainbowKit वॉलेट कनेक्टर्स ने Wagmi v2 को समर्थन देने के लिए महत्वपूर्ण बदलाव किए हैं। [अपडेटेड डॉक्स](https://www.rainbowkit.com/docs/custom-wallets) और एक [उदाहरण कनेक्टर](https://github.com/rainbow-me/rainbowkit/tree/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) का संदर्भ लें अपने dApp में कस्टम वॉलेट कनेक्टर्स को अपग्रेड करने के लिए।

वॉलेट कनेक्टर्स अब `rdns` प्रोप के साथ EIP-6963 मानक का समर्थन करते हैं। सुनिश्चित करें कि आपकी वॉलेट सूची में EIP-6963 समर्थित वॉलेट्स की डुप्लीकेट संदर्भों को रोकने के लिए इसे भरा हुआ है।

> कृपया GitHub [यहां](https://github.com/rainbow-me/rainbowkit/issues/new/choose) पर RainbowKit v2 के लिए किसी भी मुद्दे या फीडबैक की रिपोर्ट करें।
